// @dotBoxWidth: 18vw;
@dotBoxWidth: 10.7vw;
@dotBoxHeight: 0.4 * @dotBoxWidth;
@dotBoxHalfWidth: 0.1 * @dotBoxWidth; //偏移x
@dotBoxHalfHeight: 0.5 * @dotBoxHeight; //偏移y 

@oval-x-r: 10vw; // 椭圆x轴半径(长半径)
@oval-y-r: 11vh; // 椭圆y轴半径(短半径)
@coordinatePoint: 100; // 坐标点的数目(数目越大，动画越精细)

.dot {
    --oval-x-r: 10.5vw; // 默认值
    --oval-y-r: 11vh; // 默认值
    width: @dotBoxWidth;
    height: @dotBoxHeight;
    left: calc(var(--oval-x-r) + @dotBoxHalfWidth);
    top: calc(var(--oval-y-r) + @dotBoxHalfHeight);
    // transform-origin: calc(50% + 8vw) calc(50% + 8vh); /* 向下向右移动中心点 */
}

//动画函数 格式化 小心计算公式排版错误（cos sin）
.loop(@index, @customDeg) when (@index < @coordinatePoint+1) {
    .loop((@index + 1), @customDeg);
    @keyframeSel: @index * 100% / @coordinatePoint;
    @xoffset: cos(360deg / @coordinatePoint* @index+ @customDeg);
    @yoffset: sin(360deg / @coordinatePoint* @index+ @customDeg);

    @{keyframeSel} {
        transform: translate(calc(var(--oval-x-r) * @xoffset),
                calc(var(--oval-y-r) * @yoffset));
    }
}

@keyframes move0 {
    .loop(0, 0deg);
}

.dot0 {
    animation: move0 60s linear infinite;
}

.dot1 {
    animation: move1 60s linear infinite;
}

@keyframes move1 {
    .loop(0, 60deg);
}

.dot2 {
    animation: move2 60s linear infinite;
}

@keyframes move2 {
    .loop(0, 120deg);
}

.dot3 {
    animation: move3 60s linear infinite;
}

@keyframes move3 {
    .loop(0, 180deg);
}

.dot4 {
    animation: move4 60s linear infinite;
}

@keyframes move4 {
    .loop(0, 240deg);
}

.dot5 {
    animation: move5 60s linear infinite;
}

@keyframes move5 {
    .loop(0, 300deg);
}

.stop {
    animation-play-state: paused;
}